<template>
    <div>
        <Modal v-model="data.isShow" :mask-closable="false">
            <p slot="header">
                <span>绑定设备</span>
            </p>
            <div style="margin-top: 10px; padding-right: 20px;" >
                <Form ref="form" :model="data.data" :label-width="100" :rules="ruleValidate">
                    <FormItem label="设备型号" prop="name">
                        <Input v-model="data.data.name"  placeholder="请输入设备型号"></Input>						
					</FormItem>
                    <FormItem label="设备状态" prop="state">
                        <Select v-model="data.data.state" placeholder="请选择状态"> 
                            <Option :value="0">库存</Option> 
                            <Option :value="1">维修</Option> 
                        </Select>
                    </FormItem>
                    <FormItem label="会议室" prop="device">
                        <Select v-model="data.data.device" multiple>
                            <Option v-for="item in deviceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="设备数量">
                        <Input v-model="data.data.num"  placeholder="设备数量"></Input>						
					</FormItem>
                </Form>
            </div>
            <div slot="footer">
				<Button 
					type="primary" 
					@click="handleSubmit">
					确认
				</Button>
			</div>
        </Modal> 
    </div>
</template>

<script>
export default {
    props: ['data'],
    data () {
        return {
            deviceList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    }
                ],
            ruleValidate: {
                // name: [
                //     { required: true, message: '请输入会议室名称!', trigger: 'blur' },                    
                // ],
                // address: [
                //     { required: true, message: '请输入会议室地点!', trigger: 'blur' },                    
                // ],
                device: [
                    { required: true, message: '请选择设备绑定', trigger: 'blur' },                    
                ],

            }
        };
    },
    methods: {
        handleSubmit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit', this.data);
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>

</style>
